const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');


const pages = [
  'backStage', 'regAdmin', 'listAdmin', 'index','goodsList','userList'
]

function watchFiles() {
  return pages.map(item => `./src/${item}.html`)
}

function htmlPlugin() {
  return pages.map(item => {
    return new HtmlWebpackPlugin({
      template: `./src/${item}.html`,
      filename: `${item}.html`,
      chunks: [item],
    })
  })
}
function entryPath() {
  const entry = {};
  pages.forEach(item => {
    entry[item] = `./src/js/${item}.js`;
  });
  return entry;
}

const config = {
  //mode是打包模式：development|production|none
  mode: 'development',

  // entry: ['./src/index.js', './src/product.js'],
  entry: entryPath(),

  output: {
    path: path.resolve(__dirname, "dist/"),
    filename: 'bundle/[name].bundle.js',
    clean: true
  },

  plugins: [
    ...htmlPlugin(),

    new CopyWebpackPlugin({
      patterns: [
        {
          from: './src/images',
          to: 'images'
        }
      ]
    }),

    new MiniCssExtractPlugin({
      //生成的文件名及路径
      filename: 'css/main[id].css'
    }),

    new CssMinimizerPlugin()
  ],


  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'postcss-preset-env'
                  ],
                ],
              },
            },
          },
        ],
      },

      {
        test: /\.(jpg|png|gif|bmp|webp|jpeg)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 20 * 1024
          }
        },
        generator: {
          filename: 'images/[contenthash][ext]'
        }
      },

      {
        test: /\.(eot|otf|fon|font|ttf|ttc|woff)$/,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[contenthash][ext]'
        }
      },

      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-env',
                {
                  useBuiltIns: 'usage',
                  corejs: {
                    // core-js的版本
                    version: 3,
                  },
                  // 需要兼容的浏览器
                  targets: {
                    chrome: '60',
                    firefox: '60',
                    ie: '9',
                    safari: '10',
                    edge: '17',
                  },
                },
              ],
            ],
          },
        },
      }

    ]
  },


  devServer: {
    //端口号
    port: 81,
    //开启热更新
    hot: 'only',
    //打开服务器时自动开启浏览器访问
    open: true,
    //监控变化的文件的，被监控的文件只要发生变化，就会重新编译，自动刷新浏览器。
    watchFiles: [...watchFiles()],
    static: {
      //设置express服务器的根目录。
      directory: path.join(__dirname, 'dist'),
    },

    // 真实请求的地址是：'http://127.0.0.1:81/api/user/get'
    proxy: {
      //本地请求中以/api开头的做转发处理
      '/api': {
        // 转发的地址
        target: 'http://172.16.9.218:3000/',
        //如果真实服务器地址是''http://172.16.5.30/abc/getXXX'
        pathRewrite: { "^/api": "" },
        changeOrigin: true,
      }
    }
  }
}

module.exports = config;